<template>
    <div class="app-container">
        <div class="main">
            <div class="leftWrapper">
                <div v-if="detail.book_avatar" class="bgImage">
                    <img height="280px" :src="detail.book_avatar" alt="">
                </div>
                <div class="item title">基本信息</div>
                <div class="item">教材名称：{{ detail.book_name }}</div>
                <div class="item">出版社：{{ detail.book_press }}</div>
                <div class="item">作者：{{ detail.book_author }}</div>
                <div class="item">版次：{{ detail.book_version }}</div>
                <div class="item">出版时间：{{ detail.publish_date }}</div>
            </div>
            <div class="rightWrapper">
                <div class="header">{{ detail.book_name }}</div>
                <div class="topWrapper">
                    <el-card class="box-card" style="margin: 20px">
                        <div class="top">
                            <div class="lines">
                                <div class="item">
                                    <div>政治性</div><el-progress style="flex: 1;" :percentage="detail.politics_score"
                                        :format="format" color="#f56c6c"></el-progress>
                                </div>
                                <div class="item">
                                    <div>思想性</div><el-progress style="flex: 1;" :percentage="detail.thought_score"
                                        :format="format" color="#e6a23c"></el-progress>
                                </div>
                                <div class="item">
                                    <div>科学性</div><el-progress style="flex: 1;" :percentage="detail.science_score"
                                        :format="format" color="#1989fa"></el-progress>
                                </div>
                                <div class="item">
                                    <div>适宜性</div><el-progress style="flex: 1;" :percentage="detail.suitability_score"
                                        :format="format" color="#32cd32"></el-progress>
                                </div>
                            </div>
                        </div>
                    </el-card>
                    <el-card class="box-card flexCenter" style="margin: 20px 20px 20px 0;">
                        <div id="main"></div>
                    </el-card>
                </div>
                <el-tabs type="border-card" class="box-card-more">
                    <el-tab-pane label="政治性">
                        <div v-html="detail.politics_evaluate"></div>
                    </el-tab-pane>
                    <el-tab-pane label="思想性">
                        <div v-html="detail.thought_evaluate"></div>
                    </el-tab-pane>
                    <el-tab-pane label="科学性">
                        <div v-html="detail.science_evaluate"></div>
                    </el-tab-pane>
                    <el-tab-pane label="适宜性">
                        <div v-html="detail.suitability_evaluate"></div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons')
export default {
    name: "bookDetail",
    data() {
        return {
            detail: {}
        }
    },
    created() {
        this.initData()
        this.$nextTick(() => {
            this.initEcharts()
        })
    },
    methods: {
        format(percentage) {
            return percentage;
        },
        // 初始化数据
        initData() {
            const data = this.$route.params.data

            if (data && typeof data === 'string') {
                this.detail = JSON.parse(data)
            }
        },
        initEcharts() {
            const that = this
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                series: [
                    {
                        type: 'gauge',
                        startAngle: 180,
                        endAngle: 0,
                        center: ['50%', '75%'],
                        radius: '90%',
                        min: 0,
                        max: 1,
                        splitNumber: 8,
                        axisLine: {
                            lineStyle: {
                                width: 1,
                                color: [
                                    [0.25, '#FF6E76'],
                                    [0.5, '#FDDD60'],
                                    [0.75, '#58D9F9'],
                                    [1, '#32cd32']
                                ]
                            }
                        },
                        pointer: {
                            icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
                            length: '22%',
                            width: 15,
                            offsetCenter: [0, '-55%'],
                            itemStyle: {
                                color: 'auto',
                            },
                        },
                        axisTick: {
                            length: 8,
                            lineStyle: {
                                color: 'auto',
                                width: 2
                            }
                        },
                        splitLine: {
                            length: 18,
                            lineStyle: {
                                color: 'auto',
                                width: 3
                            }
                        },
                        axisLabel: {
                            color: '#464646',
                            fontSize: 20,
                            distance: -60,
                            rotate: 'tangential',
                            formatter: function (value) {
                                return '';
                            }
                        },
                        title: {
                            offsetCenter: [0, '-10%'],
                            fontSize: 20
                        },
                        detail: {
                            fontSize: 26,
                            offsetCenter: [0, '-35%'],
                            valueAnimation: true,
                            formatter: function (value) {
                                return Math.round(value * 100) + '';
                            },
                            color: 'inherit'
                        },
                        data: [
                            {
                                value: that.detail.comprehensive_score / 100 || 0,
                                name: '综合得分',
                            }
                        ]
                    }
                ]
            };

            option && myChart.setOption(option);

        }
    },
};
</script>

<style lang="scss" scoped>
.app-container {
    height: calc(100vh - 80px);
    background: #fff;

    .box-card {
        flex: 1;
        height: 200px;
    }

    ::v-deep .box-card-more {
        margin: 0 20px;
        font-size: 16px;
        color: #555;

        .title {
            color: #000;
            font-weight: 500;
            margin-bottom: 14px;
        }

        p {
            text-indent: 2em;
            padding: 0;
            margin: 10px 0;
            text-align: justify;
        }

        .p {
            text-align: justify;
            margin-bottom: 10px;
        }

        ul {
            list-style: none;
            padding: 0;
            margin: 0;

            li {
                padding: 0;
                margin: 10px 0;
                text-align: justify;

                &::before {
                    content: "•";
                    /* Unicode字符表示圆点 */
                    margin-right: 15px;
                    /* 右间距 */
                    color: #409eff;
                }
            }
        }
    }

    .flexCenter {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .main {
        display: flex;
        height: 100%;

        .leftWrapper {
            padding: 20px 40px 20px 20px;
            height: 100%;
            max-width: 24%;

            .bgImage {
                height: 280px;
                width: 100%;
                background-size: 100% 100%;
                // border-radius: 5px;
            }

            .item {
                font-size: 16px;
                color: #666;

                span {
                    display: inline-block;
                    width: 80px;
                    text-align: right;
                }
            }

            .title {
                font-size: 26px;
                font-weight: bold;
                margin: 20px 0;
            }

            border-right: 1px solid #c9e4ff;
        }

        .rightWrapper {
            flex: 1;
            padding: 20px 30px 60px 20px;
            box-sizing: border-box;
            overflow: scroll;

            .header {
                text-align: center;
                font-weight: bold;
                font-size: 36px;
                margin-bottom: 20px;
            }

            #main {
                min-width: 300px;
                min-height: 300px;
                margin-top: -40px;
            }

            .topWrapper {
                display: flex;

                .top {
                    min-height: 200px;

                    .lines {
                        flex: 1;
                        padding: 20px;

                        .item {
                            display: flex;
                            margin-bottom: 10px;

                            div {
                                width: 80px;
                            }
                        }
                    }
                }
            }
        }
    }
}</style>
